<script setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
const multipleSelection = ref([])
const state = reactive({
    headerScroll: false,// 滚动透明判断
    isShowView: false,
    selectLength: 0,// 购物车选择数量
    totalNum: 0, // 合计价格
})
const tableData = ref(
    // [{
    //     Good_name: 'Redmi Turbo 3',
    //     Good_memory: '12GB+256GB',
    //     Good_color: '青刃',
    //     Good_image: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404092041_6507293e18cf62bf60b92fb07547a8b5.png?thumb=1&w=80&h=80&f=webp&q=90',
    //     Good_price: 1799,
    //     Good_num: 1,
    //     Good_total: 1799,
    // }, {
    //     Good_name: 'Redmi Turbo 3',
    //     Good_memory: '12GB+256GB',
    //     Good_color: '青刃',
    //     Good_image: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404092041_6507293e18cf62bf60b92fb07547a8b5.png?thumb=1&w=80&h=80&f=webp&q=90',
    //     Good_price: 1799,
    //     Good_num: 1,
    //     Good_total: 1799,
    // }, {
    //     Good_name: 'Redmi Turbo 3',
    //     Good_memory: '12GB+256GB',
    //     Good_color: '青刃',
    //     Good_image: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404092041_6507293e18cf62bf60b92fb07547a8b5.png?thumb=1&w=80&h=80&f=webp&q=90',
    //     Good_price: 1799,
    //     Good_num: 1,
    //     Good_total: 1799,
    // }, {
    //     Good_name: 'Redmi Turbo 3',
    //     Good_memory: '12GB+256GB',
    //     Good_color: '青刃',
    //     Good_image: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404092041_6507293e18cf62bf60b92fb07547a8b5.png?thumb=1&w=80&h=80&f=webp&q=90',
    //     Good_price: 1799,
    //     Good_num: 1,
    //     Good_total: 1799,
    // },]
)
const getTableData = () => {
    axios({
        url: 'http://124.71.66.63:9090/cart/cartList',
        method: 'GET',
        params: { 'User_account': localStorage.getItem('account') }
    }).then(res => {
        if (res.data.isSuccess == true) {
            tableData.value = res.data.data
            state.isShowView = true;
            // console.log(tableData.value);
        }
        else {
            ElMessage({
                message: res.data.errorMsg,
                type: 'error'
            })
            router.push("/login");
        }

    })
}
const handleDelete = (index) => {
    axios({
        url: 'http://124.71.66.63:9090/cart/delCart',
        method: 'POST',
        params: { 'id': tableData.value[index].Cart_id }
    }).then(res => {
        if (res.data.isSuccess == true) {
            getTableData();
            ElMessage({
                message: res.data.data,
                type: 'success'
            })
        }
        else {
            ElMessage({
                message: res.data.errorMsg,
                type: 'error'
            })
        }
    })
}

const handleSelectionChange = (val) => {
    multipleSelection.value = val
    state.selectLength = multipleSelection.value.length;
    state.totalNum = 0;
    for (let index=0;index<state.selectLength;index++) {
        console.log(multipleSelection.value[index].good.Good_discountPrice);
        state.totalNum = state.totalNum + multipleSelection.value[index].good.Good_discountPrice;
        
    }
}

onMounted(() => {
    getTableData();
})
nextTick(() => {
    console.log('nextTick回调函数');
    document.body.addEventListener('scroll', () => {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        scrollTop > 100 ? state.headerScroll = true : state.headerScroll = false
    })
})
</script>
<template>
    <div class="cart" v-if="state.isShowView">
        <!-- 顶部bar -->
        <div class="header">
            <Header></Header>
        </div>
        <!-- 头部 -->
        <div class="page-header" :class="{ acitve: state.headerScroll }">
            <div class="title MyPage">
                <p>购物车</p>
                <div class="list">
                    <ul>
                        <li>
                            <router-link>我的订单</router-link>
                            <el-divider direction="vertical" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 内容 -->
        <div class="page-body MyPage">
            <div class="container table">
                <el-table height="680" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <template #empty>购物车空空如也</template>
                    <el-table-column type="selection" width="60"/>
                    <el-table-column class="el-table-column " class-name="row-img" label="" width="140">
                        <template #default="scope">
                            <img :src="scope.row.good.Good_image" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label-class-name="table-title" class-name="name" label="商品名称" width="500">
                        <template #default="scope">
                            {{ scope.row.good.Good_brand }} {{ scope.row.good.Good_name }} {{ scope.row.Cart_memory }}
                            {{ scope.row.Cart_color }}
                        </template>
                    </el-table-column>
                    <el-table-column label-class-name="table-title" class-name="price" label="单价" width="120">
                        <template #default="scope">{{ scope.row.good.Good_discountPrice }} 元</template>

                    </el-table-column>
                    <el-table-column label-class-name="table-title" class-name="num" prop="Cart_count" label="数量"
                        width="120" />
                    <el-table-column label-class-name="table-title" class-name="total" label="总计" width="120">
                        <template #default="scope"><span>{{ scope.row.good.Good_discountPrice * scope.row.Cart_count
                                }}</span> 元</template>

                    </el-table-column>
                    <el-table-column label-class-name="table-title" label="操作" width="120">
                        <template #default="scope">
                            <el-link class="del" :underline="false" @click="handleDelete(scope.$index, scope.row)"><i
                                    class="icon icon-shanchu"></i></el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="page-footer MyPage">
            <div class="container ">
                <div class="container-left">
                    <RouterLink class="toHome" to="/home">继续购物</RouterLink>
                    <el-divider direction="vertical" />
                    <span>已选择 <span>{{ state.selectLength }}</span> 件</span>

                </div>
                <div class="flex-grow" />
                <div class="container-right">
                    <span class="footer-total">合计 <span>{{ state.totalNum }}</span> 元</span>
                    <el-button type="primary">去结算</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<style lang="less">
.active {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;

}

.cart {
    width: 100%;
    height: 100%;

    /* 头部CSS */
    .page-header {
        height: 64px;
        z-index: 4;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;
        -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
    }

    .page-header .title {
        width: 1225px;
        height: 64px;
        line-height: 64px;
        font-size: 18px;
        font-weight: 400;
        color: #212121;
        margin: 0 auto;
    }

    .page-header .title p {
        float: left;
        font-weight: bold;
    }

    .page-header .title .list {
        height: 64px;
        float: right;
    }

    .page-header .title .list ul {
        list-style: none;
    }

    .page-header .title .list li {
        float: left;

    }

    .page-header .title .list li a {
        font-size: 14px;
        color: #616161;
    }

    .page-header .title .list li a:hover {
        font-size: 14px;
        color: #ff6700;
    }

    /* 头部CSS END */

    /* 主要内容CSS */
    .page-body {
        width: 1200px;
        
        .container.table {
            height: 700px;
            margin: 50px 0 0 0;

            .table-title {
                font-size: 14px !important;
                font-family: 400 !important;
            }

            .el-table_1_column_2 {}

            .el-table_1_column_3 {}

            .el-table_1_column_4 {}

            .el-table_1_column_5 {}

            .el-table_1_column_6 {}

            .del {
                width: 24px;
                height: 24px;
                position: relative;
                border-radius: 50%;
                transition: .4s;

                .el-link__inner {
                    padding: 0;
                    display: block;
                    margin: auto;
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    width: 12px;
                    height: 12px;
                    line-height: 12px;

                }

                .icon-shanchu {
                    text-align: center;
                    font-size: 12px;
                }

                &:hover {
                    color: #ffffff;
                    background-color: #F56C6C;
                    border-radius: 50%;
                    transition: .3s;
                }
            }

            .row-img {
                img {
                    width: 80px;
                    height: 80px;
                }
            }

            .name {
                font-size: 18px;
                font-weight: 600;
            }

            .price {
                font-size: 16px;
            }

            .num {
                font-size: 18px;
                font-weight: 600;
            }

            .total {
                span {
                    color: #ff6700;
                    font-size: 16px;
                }
            }
        }
    }

    /* 主要内容CSS END */
    .page-footer {
        // position: sticky;
        // bottom: 10px;
        // left: 0;
        // width: 100%;
        // right: 0;
        // margin:0 auto;
        // margin-left: -600px;
        height: 64px;
        z-index: 4;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);

        

        .toHome {
            display: inline-block;
            width: 90px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            color: #757575;
            text-decoration: none;
            font-weight: 400;

            &:hover {
                background-color: #409EFF;
                color: #ffffff;
            }
        }

        .container {
            display: flex;
            flex-direction: row;
            margin: auto;
        }
        .container-left {
            span {
                font-size: 16px;
                color: #757575;

                span {
                    font-size: 14px;
                    color: #409EFF;
                    font-weight: bold;

                }
            }
        }

        .flex-grow {
            flex-grow: 1;
        }

        .container-right {
            display: flex;
            width: 500px;
            height: 64px;
            justify-content: end;
            .footer-total{
                display: block;
                // width: 200px;
                height: 64px;
                line-height: 64px;
                text-align: center;
                color: #409EFF;
                margin-right: 20px;
                span{
                    color: #1e8efd;
                    font-size: 20px;
                    font-weight: bold;
                }
            }
            .el-button--primary {
                width: 100px;
                height: 64px;
            }
        }
        
    }
}
</style>